<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 bootstrap 样式表 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
  </head>

  <body>
    <h4>测试bootstrap的弹框</h4>
    <!-- Button trigger modal -->
    <!-- 
       bootstrap提供的自定义属性
      data-bs-toggle modal 切换Modal弹框
      data-bs-target 控制哪个弹框 #exampleModal id为exampleModal的弹框
     -->
    <button
      type="button"
      class="btn btn-primary"
      data-bs-toggle="modal"
      data-bs-target="#box"
    >
      Launch demo modal
    </button>

    <!-- Modal -->
    <div
      class="modal fade"
      id="box"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <!-- 标题 -->
            <h5 class="modal-title" id="exampleModalLabel">我是一个弹框😁</h5>
            <!-- 关闭 X -->
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <!-- 主体区域 -->
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste
            maxime, sequi incidunt harum perferendis consequatur suscipit rem
            delectus accusamus aliquid modi eligendi consequuntur totam quisquam
            quia! Assumenda iste dolorem corporis.
          </div>
          <!-- 底部区域 -->
          <div class="modal-footer">
            <!-- 
              data-bs-dismiss="modal"
              关闭 modal弹框
             -->
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              关闭
            </button>
            <button type="button" class="btn btn-primary">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <!-- bootstrap的js -->
    <script src="./lib/bootstrap.min.js"></script>
    <script>
      // 获取modal对象
      // Modal 参数 弹框的dom对象
      const myModal = new bootstrap.Modal(document.querySelector('#box'))
      console.log('myModal:', myModal)
      // 弹出弹框
      myModal.show()
      // 等3秒关闭
      setTimeout(() => {
        myModal.hide()
      }, 3000)
    </script>
  </body>
</html>
